<template>
  <div class="message" @click="showFaceDialog({bShow:false})">
    <a class="show-more" @click="setMessageList({
      id: $route.query.id,
      sid: $route.query.sid,
      defaults: 1,
      page
    })">查看更多</a>
    <template v-for="item in message">
      <bubble-text
        :key="item.id"
        :text="item.message"
        :direction="item.user_type === '1' ? 'right' : 'left'"
        :date="item.name+' '+item.add_time"
        :image="item.avatar"
        v-if="item.user_type != 0">
      </bubble-text>
      <template  v-else>
      <cell-group
        v-if="item.goods_name"
        class="message__cell-group"
        :key="item.id"
      >
        <a :href="item.goods_url">
          <cell
            :image="item.goods_thumb || '' "
            :title="item.goods_name"
            :label="item.goods_price || item.shop_price">
          </cell>
          </a>
      </cell-group>
      </template>
    </template>
  </div>
</template>

<script>
import {
  mapState,
  mapActions,
  mapGetters
} from 'vuex';

// custom components
import CellGroup from '@/components/CellGroup';
import Cell from '@/components/Cell';
import BubbleText from '@/components/chat/BubbleText';

export default {
  name: 'message',
  props: {
  },
  components: {
    BubbleText,
    CellGroup,
    Cell
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.setMessageId({
        messageId: to.query.id
      });
      vm.$el.scrollTop = vm.$el.scrollHeight - vm.$el.offsetHeight;
    });
  },
  beforeRouteLeave(to, from, next) {
    this.changeToRead({
      userId: this.$route.query.id
    });
    next();
  },
  created() {
    this.setMessageList({
      id: this.$route.query.id,
      sid: this.$route.query.sid,
      type: 'default'
    });
    this.showBottomNav(false);
    this.showMessageInput(true);
  },
  computed: {
    ...mapState('chat/bottomNavigator', [
      'show'
    ]),
    ...mapState('chat/message', [
      'bScroll'
    ]),
    ...mapGetters('chat/message', [
      'message',
      'page'
    ])
  },
  methods: {
    ...mapActions('chat/bottomNavigator', [
      'showBottomNav'
    ]),
    ...mapActions('chat/messageBottomInput', [
      'showMessageInput'
    ]),
    ...mapActions('chat/message', [
      'setMessageList',
      'changeToRead',
      'setMessageId'

    ]),
    ...mapActions([
      'showFaceDialog'
    ])
  },
  watch: {
    message: {
      deep: true,
      handler(val, oldVal) {
        if (this.bScroll) {
          this.$nextTick(() => {
            this.$el.scrollTop = this.$el.scrollHeight - this.$el.offsetHeight;
          });
        }
      }
    }
  }
};
</script>


<style lang="scss" scope>
  @import '../../assets/style/config';
  @import '../../assets/style/mixins/common';
  .message{
    padding:1rem 1rem;
    height: inherit;
    bottom:0rem;
    margin-bottom:4rem;
    .bubble-text{
      margin-bottom:1.4rem;
    }
    .show-more{
      margin-top:0rem;
      padding:.4rem 0;
      line-height:1.5;
      z-index: 11;
      font-size:1.3rem;
      width:100%;
      top:0rem;
      display: block;
      text-align: center;
      margin-bottom: 1rem;
      background:$body-background;
    }
  }
  .message__cell-group{
    border-radius: 6px;
    overflow: hidden;
    width:100%;
    border:1px solid $border-color-split;
    margin-bottom:1.4rem;
    .cell dt{
       @include direction(baseline,space-between);
    }
    .cell img{
      width:5rem;
      height:5rem;
      border-radius: 4px;
    }
    label span{
      color: $color;
    }
  }
</style>
